/* 03. blog css here */
.blog_page_section{
    padding: 113px 0 156px;
    @media #{$tablet-device}{
        padding: 38px 0 72px;
    }
    @media #{$large-mobile}{
        padding: 20px 0 54px;
    }
    & .section_title{
        margin-bottom: 160px;
        @media #{$tablet-device}{
            margin-bottom: 78px;
        }
        @media #{$large-mobile}{
            margin-bottom: 58px;
        }
    }
}
.single_blog{
    margin-bottom: 52px;
    @media #{$large-mobile}{
        margin-bottom: 30px;
    }
    &.blog_sticky{
        margin-bottom: 58px;
        @media #{$large-mobile}{
            margin-bottom: 30px;
        }
        & .blog_content{
            & > h3{
                font-size: 36px;
                line-height: 44px;
                @media #{$desktop-device}{
                    font-size: 28px;
                    line-height: 35px;
                }
                @media #{$tablet-device}{
                    font-size: 28px;
                    line-height: 35px;
                }
                @media #{$large-mobile}{
                    font-size: 24px;
                    line-height: 28px;
                }
                @media #{$small-mobile2}{
                    font-size: 19px;
                    line-height: 25px;
                }
            }
        }
    }
}
.blog_thumb{
    overflow: hidden;
    &:hover{
        & img{
            transform: scale(1.05);
        }
    }
    & img{
        width: 100%;
        transition: .3s;
    }
}
.blog_content{
    padding: 23px 0 0;
    @media #{$large-mobile}{
        padding: 18px 0 0;
    }
    & > h3{
        font-size: 24px;
        line-height: 30px;
        font-weight: 600;
        margin-bottom: 10px;
        @media #{$desktop-device}{
            font-size: 20px;
            line-height: 26px;
        }
        @media #{$tablet-device}{
            font-size: 20px;
            line-height: 25px;
        }
        @media #{$large-mobile}{
            font-size: 20px;
            line-height: 24px;
        }
        @media #{$small-mobile2}{
            font-size: 17px;
            line-height: 22px;
        }
        & a{
            &:hover{
                color: $secondary_color;
            }
        }
    }
}

.blog_meta{
    margin-bottom: 9px;
    @media #{$large-mobile}{
        margin-bottom: 4px;
    }
    & p{
        font-size: 14px;
        line-height: 22px;
        color: #999999;
        & a{
            font-weight: 600;
            color: #000000;
            &:hover{
               color: #ff9900;;
            }
        }
        & span{
            font-weight: 600;
            color: #ff9900;
        }
    }
}

.blog_desc{
    margin-top: 26px;
    @media #{$large-mobile}{
        margin-top: 16px;
    }
    & p{
       font-size: 14px;
       line-height: 24px;
       color: #666666; 
    }
}
.blog_pagination {
    margin-top: 73px;
    @media #{$large-mobile}{
        margin-top: 20px;
    }
}
.pagination_style {
    & ul{
        & li{
            margin-right: 24px;
            &:last-child{
                margin-right: 0;
            }
            @media #{$large-mobile}{
                margin-right: 18px;
            }
            & a{
                font-size: 16px;
                line-height: 36xp;
                color: #000000;
                &:hover{
                    color: $secondary_color;
                    & i{
                        color: #cccccc;
                    }
                }
                @media #{$large-mobile}{
                    font-size: 15px;
                }
                & i{
                    font-size: 26px;
                    vertical-align: middle;
                    transition: .3s;
                    -webkit-transition: .3s;
                    -moz-transition: .3s;
                    -ms-transition: .3s;
                    -o-transition: .3s;
                    @media #{$large-mobile}{
                        font-size: 20px;
                    }
                }
            }
        }
    }
}
.blog_widget{
    padding-left: 65px;
    @media #{$desktop-device}{
        padding-left: 0;
    }
    @media #{$tablet-device}{
        padding-left: 0;
        padding-top: 71px;
    }
    @media #{$large-mobile}{
        padding-left: 0;
        padding-top: 54px;
    }
}
.blog_widget_list {
    margin-bottom: 56px;
    @media #{$tablet-device}{
        margin-bottom: 40px;
    }
    @media #{$large-mobile}{
        margin-bottom: 30px;
    }
    &:last-child{
        margin-bottom: 0;
    }
    & > h2{
        font-size: 24px;
        line-height: 28px;
        font-weight: 700;
        margin-bottom: 29px;
        @media #{$desktop-device}{
            font-size: 20px;
            line-height: 25px;
            margin-bottom: 29px;
        }
        @media #{$large-mobile}{
            font-size: 20px;
            line-height: 23px;
            margin-bottom: 20px;
        }
    }
}
.widget_search{
    & form{
        position: relative;
        border: 1px solid #c0c0c0;
        width: 100%;
        @media #{$tablet-device}{
            width: 400px;
        }
        & input{
            width: 100%;
            height: 50px;
            padding: 0 50px 0 18px;
        }
        & button{
            position: absolute;
            right: 16px;
            top: 0;
            height: 100%;
            font-size: 24px;
            color: #000000;
            padding: 0;
            border: 0;
            background: inherit;
            &:hover{
                color: $secondary_color;
            }
        }
    }
}

.widget_post{
    & p{
        font-size: 16px;
        line-height: 24px;
        @media #{$large-mobile}{
            font-size: 15px;
            line-height: 22px;
            margin-bottom: 10px;
        }
        & a{
            &:hover{
                color: $secondary_color;;
            }
        }
        & span{
            color: #999999;
        }
        & i{
            font-size: 24px;
            color: #666666;
            vertical-align: middle;
            margin-right: 7px;
        }
    }
}


.widget_categories{
    & ul{
        & li{
            & a{
                font-size: 16px;
                line-height: 30px;
                color: #666666;
                &:hover{
                    color: $secondary_color;;
                }
                @media #{$large-mobile}{
                    font-size: 15px;
                    line-height: 28px;
                }
            }
        }
    }
}




.widget_tags{
    & ul{
        & li{
            display: inline-block;
            & a{
                font-size: 16px;
                line-height: 30px;
                color: #666666;
                &:hover{
                    color: $secondary_color;;
                }
            }
        }
    }
}
